﻿<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS鼠标滑过图片放大显示的相册效果 - 站长素材</title>
<link rel="stylesheet" href='../../css/test2/hoverbox.css' type="text/css" media="screen, projection" />
<!--[if lte IE 7]>
<link rel="stylesheet" href='../../css/test2/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]-->
</head>
<body>
<h1>Hoverbox Image Gallery</h1>
<ul class="hoverbox">
<li>
<a href="#"><img src="../../img/test2/photo01.jpg" alt="description" /><img src="../../img/test2/photo01.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo02.jpg" alt="description" /><img src="../../img/test2/photo02.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo03.jpg" alt="description" /><img src="../../img/test2/photo03.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo04.jpg" alt="description" /><img src="../../img/test2/photo04.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo05.jpg" alt="description" /><img src="../../img/test2/photo05.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo06.jpg" alt="description" /><img src="../../img/test2/photo06.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo07.jpg" alt="description" /><img src="../../img/test2/photo07.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo08.jpg" alt="description" /><img src="../../img/test2/photo08.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo09.jpg" alt="description" /><img src="../../img/test2/photo09.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo10.jpg" alt="description" /><img src="../../img/test2/photo10.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo11.jpg" alt="description" /><img src="../../img/test2/photo11.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo12.jpg" alt="description" /><img src="../../img/test2/photo12.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo13.jpg" alt="description" /><img src="../../img/test2/photo13.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo14.jpg" alt="description" /><img src="../../img/test2/photo14.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo15.jpg" alt="description" /><img src="../../img/test2/photo15.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo16.jpg" alt="description" /><img src="../../img/test2/photo16.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo17.jpg" alt="description" /><img src="../../img/test2/photo17.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo18.jpg" alt="description" /><img src="../../img/test2/photo18.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo19.jpg" alt="description" /><img src="../../img/test2/photo19.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="../../img/test2/photo20.jpg" alt="description" /><img src="../../img/test2/photo20.jpg" alt="description" class="preview" /></a>
</li>
</ul>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>